<template>
	<Loading v-show="isLoading"></Loading>
	<div class="main">
		<div>
			<div class="common-title">基本信息</div>
			<div class="base-info">
				<ul>
					<li>
						<div class="base-info-item-title">等级</div>
						<div v-if="riskWarningData.riskLevel==1" class="base-info-item-desc base-info-red">轻微(1级)</div>
						<div v-else-if="riskWarningData.riskLevel==2" class="base-info-item-desc base-info-red">关注(2级)</div>
						<div v-else-if="riskWarningData.riskLevel==3" class="base-info-item-desc base-info-red">警惕(3级)</div>
						<div v-else-if="riskWarningData.riskLevel==4" class="base-info-item-desc base-info-red">重大(4级)</div>
						<div v-else-if="riskWarningData.riskLevel==5" class="base-info-item-desc base-info-red">高危(5级)</div>
						<div v-else class="base-info-item-desc base-info-red">重大(6级)</div>
					</li>
					<li>
						<div class="base-info-item-title">推送人</div>
						<div class="base-info-item-desc">{{riskWarningData.lawyerName}}律师</div>
					</li>
					<li>
						<div class="base-info-item-title">涉及人数</div>
						<div class="base-info-item-desc">{{riskWarningData.people}}人</div>
					</li>
					<li>
						<div class="base-info-item-title">发生时间</div>
						<div class="base-info-item-desc">{{riskWarningData.createTime}}</div>
					</li>
					<li>
						<div class="base-info-item-title">决策院校</div>
						<div class="base-info-item-desc">{{riskWarningData.schoolName}}</div>
					</li>
				</ul>
				<div class="base-info-case">
					<div>案件经过</div>
					<div>{{riskWarningData.description}}</div>
				</div>
			</div>
			
			<div class="common-title">损失预判</div>
			<div class="loss-prediction">{{riskWarningData.lossPrediction}}</div>
			
			<div class="common-title">风险焦点</div>
			<div class="risk-focus">
				<ul>
					<li v-for="(item,index) in riskWarningData.riskFocus" :key="index">{{index+1+'.'+item}}</li>
				</ul>
			</div>
			
			<div class="common-title">参考案例</div>
			<div class="reference-cases">
				<ul>
					<li v-for="(item,index) in riskWarningData.referenceCases" :key="index">
						<a :href="item.href">
							<div class="reference-cases-title">{{item.title}}</div>
							<div class="reference-cases-img"><img src="../../../assets/images/wechat/leader/riskwarning/right.png"></div>
						</a>
					</li>
				</ul>
			</div>
			
			<div class="common-title">决策建议</div>
			<div class="make-policy">
				<ul>
					<li v-for="(item,index) in riskWarningData.policyDecision" :key="index">
						<div class="make-policy-case">{{index+1+'.'+item.content}}</div>
						<div class="make-policy-tip">{{item.result}}</div>
					</li>
				</ul>
			</div>
			
		</div>
	</div>
</template>

<script>
//引入组件
import Loading from '@/components/wechat/index/Loading.vue'
//引入js	
import router from '@/router/index'
import request from '@/utils/request'

export default {
	name: 'RiskWarning',
	components: {
		Loading
	},
    data(){
		return {
			isLoading:true,//监控页面是否加载完毕
			ajaxFlag:true,//监控ajax请求，避免多次请求
			ajaxData:{},//ajax提交的值
			
			riskWarningData:{}
		}
    },
    created:function(){
		var that=this;
		
		
		that.ajaxData='riskWarningId='+that.$route.query.id;
		request({
			headers:{
				'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
			},
			url: "/wechat/riskWarning",
			method: "post",
			data:that.ajaxData
		}).then(function(res){
		   if(res.flag){
			   that.riskWarningData=res.riskWarningData;
			   that.riskWarningData.riskFocus=JSON.parse(that.riskWarningData.riskFocus);
			   that.riskWarningData.referenceCases=JSON.parse(that.riskWarningData.referenceCases);
			   that.riskWarningData.policyDecision=JSON.parse(that.riskWarningData.policyDecision);
		   }
		   that.isLoading=false;
		}).catch(function(error){
			that.isLoading=false;
			console.log(error);
		})
  	},
  	beforeMount: function() {
		
    },
  	mounted: function () {
  		
  	},
  	methods:{
  		
  	}
}
</script>

<style lang="scss" scoped>
.main{
     width:100%;
	 background: radial-gradient(circle farthest-side  at top left,#2ebdcb,#236e8e,#191c51);
     overflow:hidden;
     position:relative;
}
.main>div{
	width: 20rem;
	margin: auto;
	background-color: #f0f6f8;
	margin-top: 1.25rem;
	margin-bottom: 3.125rem;
	overflow: hidden;
}
.common-title{
	width:5rem;
	border-radius: 0px 1rem  1rem 0rem;
	line-height: 1.625rem;
	background-color: #215e84;
	color: #FFFFFF;
	text-align: center;
	font-size: 0.875rem;
	margin-top: 1.25rem;
}
.base-info{
	width: 100%;
	overflow: hidden;
}
.base-info>ul{
	width: 96%;
	margin: auto;
}
.base-info>ul>li{
	width: 100%;
	border-bottom: 1px solid #d5e4ff;
	display: flex;
	font-size: 0.875rem;
}
.base-info-item-title{
	width: 30%;
	line-height: 2.25rem;
}
.base-info-item-desc{
	width: 70%;
	text-align: right;
	line-height: 2.25rem;
}
.base-info-red{
	color: #d12121 !important;
}
.base-info-case{
	width: 96%;
	margin: auto;
	margin-top: 0.625rem;
}
.base-info-case>div:nth-child(1){
	width: 100%;
	font-size: 0.875rem;
	line-height: 1.5rem;
}
.base-info-case>div:nth-child(2){
	width: 100%;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: justify;
}
.loss-prediction{
	width: 96%;
	margin: auto;
	font-size: 0.75rem;
	line-height: 1.25rem;
	text-align: justify;
	margin-top: 0.625rem;
}
.risk-focus{
	width: 100%;
	overflow: hidden;
	margin-top: 0.625rem;
}
.risk-focus>ul{
	width: 96%;
	margin: auto;
}
.risk-focus>ul>li{
	width: 100%;
	border-bottom: 1px solid #d5e4ff;
	line-height: 2.25rem;
	font-size: 0.875rem;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.risk-focus>ul>li:nth-last-child(1){
	border-bottom-color:#f0f6f8 !important;
}
.reference-cases{
	width: 100%;
	overflow: hidden;
	margin-top: 0.625rem;
}
.reference-cases>ul{
	width: 96%;
	margin: auto;
}
.reference-cases>ul>li{
	width: 100%;
	border-bottom: 1px solid #d5e4ff;
}
.reference-cases>ul>li:nth-last-child(1){
	border-bottom-color:#f0f6f8 !important;
}
.reference-cases>ul>li>a{
	display: block;
	display: flex;
}
.reference-cases-title{
	flex: 1;
	line-height:2.25rem;
	font-size: 0.875rem;
	color: #000;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.reference-cases-img{
	width: 2.25rem;
	height:2.25rem;
	overflow: hidden;
}
.reference-cases-img>img{
	width: 100%;
}
.make-policy{
	width: 100%;
	overflow: hidden;
	margin-top: 0.625rem;
}
.make-policy>ul{
	width: 96%;
	margin: auto;
}
.make-policy>ul>li{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.make-policy>ul>li:before{
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	background-color: #f0f6f8;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	border:0.375rem solid #215e84 ;
	z-index: 2;
}
.make-policy>ul>li:after{
	content: "";
	width: 0.125rem;
	height: 100%;
	background-color: #215e84;
	position: absolute;
	left: 0.5rem;
	top: 0;
	z-index: 1;
}
.make-policy>ul>li:nth-last-child(1):after{
	height: 0 !important;
}
.make-policy-case{
	width: 90%;
	font-size: 0.875rem;
	line-height: 1.25rem;
	float: right;
}
.make-policy-tip{
	width: 90%;
	font-size: 0.75rem;
	margin-bottom: 1.25rem;
	line-height: 1.25rem;
	float: right;
}
</style>
